<template>
  <div>
    <!-- 指标基本信息label 开始  -->
    <div>
      <div class="header">
        <span class="headerIcon">|</span>
        <span class="headerText">{{pageName}}</span>
        <span class="headerDiscript">您可以在这里设置前面tab页面需要展示的被测评者</span>
      </div>
    </div>
    <!-- 指标基本信息label 结束  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>综合部门处级干部</span>
        <el-button class="btn_oprate" type="text" @click="toAddUser1()">添加</el-button>
        <el-button class="btn_oprate" type="text">删除</el-button>
      </div>
      <el-checkbox v-for="(item, index) in tableData1"
                   :label="item.value" class="listitem"
                   :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
        {{item.label}}

      </el-checkbox>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>教学部门处级干部</span>
        <el-button class="btn_oprate" type="text" @click="toAddUser2()">添加</el-button>
        <el-button class="btn_oprate" type="text">删除</el-button>
      </div>
      <el-checkbox v-for="(item, index) in tableData2"
                   :label="item.value" class="listitem"
                   :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
        {{item.label}}

      </el-checkbox>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>科级岗位干部</span>
        <el-button class="btn_oprate" type="text" @click="toAddUser3()">添加</el-button>
        <el-button class="btn_oprate" type="text">删除</el-button>
      </div>
      <el-checkbox v-for="(item, index) in tableData3"
                   :label="item.value" class="listitem"
                   :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
        {{item.label}}

      </el-checkbox>
    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="selectUsersVsiable"
      width="30%"
      :before-close="handleClose">
      <span>请选择被测评人员：</span>
      <div style="width:100%;height: 200px;overflow-y: scroll;">
      <el-checkbox v-for="(item, index) in userlists"
                   :label="item.value"  style="width:100%;margin:3px 10px;"
                   :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
        {{item.label}}
      </el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="selectUsersVsiable = false">取 消</el-button>
      <el-button type="primary" @click="confirmUser">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as kaopingService from '@/api/dangjian/kaopingService';
  import * as userService from '@/api/system/user'
  export default {
    name: 'panel9',
    data() {
      return {
        pageName: '测评查询设置',
        tableData1:[
          {
            label:"正在查找",
            value:""
          }
        ],
        tableData2:[
          {
            label:"正在查找",
            value:""
          }
        ],
        tableData3:[
          {
            label:"正在查找",
            value:""
          }
        ],
        selectUsersVsiable:false,
        userlists:[],
        checkedEquipments:[],
        assessedType:"",
      }
    },
    mounted() {
      this.loadData();
      this.getAllUsers();
      this.checkedEquipments=[];
    },
    methods:{
      getAllUsers(){
        var that=this;
        userService.listUser({
          pageNum:1,
          pageSize:10000
        }).then(response=>{
          var userlists=[];
          for(var i=0;i<response.rows.length;i++){
            var item= {
              label:response.rows[i].nickName +"   "+ response.rows[i].userName,
              value:response.rows[i].userName,
            }
            userlists.push(item);
          }
          console.log(userlists);
          that.userlists=userlists;
        });
      },
      loadData(){
        var that=this;
        var tableData1=[];
        var tableData2=[];
        var tableData3=[];

        kaopingService.getBeAssessed().then(response=>{
          var datas=response.data;
          var tableData1=[];
          var tableData2=[];
          var tableData3=[];
          for(var i=0;i<datas.length;i++){
            if(datas[i].assesstype=="综合部门处级干部"){
              tableData1.push({
                label:datas[i].nickname+" "+datas[i].username,
                value:datas[i].username
              })
            }
            if(datas[i].assesstype=="教学部门处级干部"){
              tableData2.push({
                label:datas[i].nickname+" "+datas[i].username,
                value:datas[i].username
              })
            }
            if(datas[i].assesstype=="科级岗位干部"){
              tableData3.push({
                label:datas[i].nickname+" "+datas[i].username,
                value:datas[i].username
              })
            }
          }
          that.tableData1=tableData1;
          that.tableData2=tableData2;
          that.tableData3=tableData3;
          that.checkedEquipments=[];
        })

        if(tableData1.length<1){
          tableData1=[
            {
              label:"暂无数据",
              value:""
            }
          ];
        }
        if(tableData2.length<1){
          tableData2=[
            {
              label:"暂无数据",
              value:""
            }
          ];
        }
        if(tableData3.length<1){
          tableData3=[
            {
              label:"暂无数据",
              value:""
            }
          ];
        }

        that.tableData1=tableData1;
        that.tableData2=tableData2;
        that.tableData3=tableData3;
      },
      toAddUser1(){
        this.selectUsersVsiable=true;
        this.checkedEquipments=[];
        this.assessedType="综合部门处级干部";
      },
      toAddUser2(){
        this.selectUsersVsiable=true;
        this.checkedEquipments=[];
        this.assessedType="教学部门处级干部";
      },
      toAddUser3(){
        this.selectUsersVsiable=true;
        this.checkedEquipments=[];
        this.assessedType="科级岗位干部";
      },
      handleClose(done) {
        var that=this;
        that.selectUsersVsiable=false;

      },
      confirmUser(){
        var that=this;
        if(that.checkedEquipments.length<1){
          that.selectUsersVsiable=false;
        }
        that.$confirm('保存选中项目？')
          .then(_ => {
            //将选中的项目保存到数据库
            kaopingService.saveBeassessed({
              assesstype:that.assessedType,
              users:that.checkedEquipments
            }).then(response=>{
              if(response.code==200) {
                that.$message.success("数据已保存")
              }

              that.loadData();
            });
            that.selectUsersVsiable=false;

          })
          .catch(_ => {});
      },
      saveTempBeassessed(checked,val){
        var that=this;
        var userName=val.value;
        if(checked){
          //向数组中添加
          var has=false;
          for(var i=0;i<that.checkedEquipments.length;i++){
            var aCheck=that.checkedEquipments[i];
            if(aCheck==userName){
              has=true;
              break;
            }
          }
          if(!has){
            that.checkedEquipments.push(userName);
          }
        }else{
          //从数组中取掉
          for(var i=0;i<that.checkedEquipments.length;i++){
            var aCheck=that.checkedEquipments[i];
            if(aCheck==userName){
              that.checkedEquipments=that.checkedEquipments.slice(i,1);
              break;
            }
          }
        }
      },
    }
  }
</script>

<style scoped>
  .header {
    /*border-bottom: 2px solid lightgrey;*/
    padding: 10px 10px 10px 0px;
  }

  .headerIcon {
    color: #00afff;
    font-weight: 900;
    font-size: 22px;
  }

  .headerText {
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
  }
  .headerDiscript{
    font-weight:normal;
    font-size: 14px;
    padding-left: 10px;
    margin-left: 100px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom:8px;
    display: inline-block;
    margin-right: 30px;
  }
  .btn_oprate{
    float: right; padding: 13px 0;margin-right: 30px;
  }
  .box-card{
    margin-top: 20px;
  }
  .listitem{
    width:150px;
    height:25px;
  }
</style>
